<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 
            
            computed：属性的调用  有缓存     一进页面就会执行，只有依赖的data里的属性值变化才会执行
            
            methods: 方法的调用   没有缓存   触发的时候才执行

            watch: 监听  只有监听的值发生改变时，才会执行
        
        -->
</head>
<body>
    <div id="app">
        {{address}}
    </div>
    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                provice:'河北省',
                city:'石家庄市',
                // address:''
            },
            computed:{  //计算属性 有缓存
                // address(){
                //     return `${this.provice}---${this.city} `
                // }
                address:{
                    get(){
                        return `${this.provice}---${this.city} `
                    },
                    set(val){
                        //山西省---大同市
                        this.provice = val.split('---')[0];
                        this.city = val.split('---')[1];
                    }
                }
            },
            // watch:{
            //     provice:function(val){
            //         this.address = `${val}---${this.city}`
            //     },
            //     city:function(val){
            //         this.address = `${this.provice}---${val}`
            //     }
            // }
        })

        // vm.$mount('#app')

        // computed: 由多个值影响一个值，有缓存

        // watch：一个值影响多个值

        // methods

        let obj = {
            name:'lixd'
        }
        let num = 19;
        
        Object.defineProperty(obj,'age',{
            get(){
                return num
            },
            set(val){
                num = val;
            }
        })

        console.log(obj.age);

        obj.age = 22;

        console.log(obj.age);

    </script>
</body>
</html>